import React from 'react'
import {Card, Button, Modal} from 'antd'
import './ui.less'
export default class Modals extends React.Component{
  state = {
    showModal1: false,
    showModal2: false,
    showModal3: false
  }
  handleOpen = (type) => {
    this.setState({
      [type]: true
    })
  }
  handleConfirm =(type)=>{
    Modal.confirm({
      title: '确认',
      content: '你确定？',
      onOk(){
        console.log('ok')
      },
      onCancel(){
        console.log('cancel')
      }
    })
  }
  render(){
    return (
      <div>
        <Card title="基础模态框" className="card-wrap">
          <Button type="primary" onClick={()=>this.handleOpen('showModal1')}>Open</Button>
          <Button type="primary" onClick={()=>this.handleOpen('showModal2')}>自定义页脚</Button>
          <Button type="primary" onClick={()=>this.handleOpen('showModal3')}>顶部20px弹框</Button>
        </Card>
        <Card title='确认弹框'>
          <Button type="primary" onClick={()=>this.handleConfirm('type')}>点击</Button>
        </Card>
        <Modal title='React' visible={this.state.showModal1} onCancel={()=>{
          this.setState({
            showModal1: false
          })
        }}>
        </Modal>
        <Modal title='React' visible={this.state.showModal2} onCancel={()=>{
          this.setState({
            showModal2: false
          })
        }}
        okText='下一步'
        cancelText='算了'
        >
        </Modal>
      </div>
    )
  }
}